import React, { Component } from 'react'

export default class Count extends Component {
  constructor() {
    super()
    // 定义状态
    // 注意: 并不是所有的数据,都要写在状态中. 需要在页面上渲染的数据,才应该写在状态中
    this.state = {
      count: 0,
      msg: '我给你一百万',
    }

    // 通过原型上的handle赋值出来一个新的函数,新函数的this固定指定了组件实例. 然后把新函数添加到组件实例上
    this.handle = this.handle.bind(this)
  }

  handle() {
    this.setState({
      count: this.state.count + 1,
      msg: '我不给了',
    })
  }

  render() {
    // 注意: render组件中的this,一定是当前组件实例

    return (
      <div>
        <div id="box">{this.state.count}</div>
        <div>{this.state.msg}</div>
        {/* 注册事件时,使用的是实例上this固定的新函数 */}
        <button onClick={this.handle}>+</button>
      </div>
    )
  }
}
